﻿/*--------------------Author:cyan------------------*/
/*-----------banner效果代码-------------*/
.flickerplate {
	position:relative;
	width:100%;
	height:500px;
	background-color:#e6e6e6;
	overflow:hidden;
	z-index:0;

}
.flickerplate ul.flicks {
	width:10000%;
	height:100%;
	padding:0px;
	margin:0px;
	list-style:none
}
.flickerplate ul.flicks>li {
	float:left;
	width:1%;
	height:100%;
	background-position:center;
	background-size:cover;
	display:table
}

.flickerplate .arrow-navigation {
	position:absolute;
	height:80%;
	width:10%;
	top:5%;
	z-index:100;
	overflow:hidden
}
.flickerplate .arrow-navigation .arrow {
	display:block;
	height:100%;
	width:90%;
	-webkit-transition:all 0.2s ease-out;
	-moz-transition:all 0.2s ease-out;
	-o-transition:all 0.2s ease-out;
	-ms-transition:all 0.2s ease-out;
	transition:all 0.2s ease-out
}
.flickerplate .arrow-navigation:hover, .flickerplate .arrow-navigation .arrow:hover {
	cursor:pointer
}
.flickerplate .arrow-navigation.left {
	left:0%
}
.flickerplate .arrow-navigation.left .arrow {
	opacity: 0;
	margin: 0px 0px 0px 80%;
	background:url(../images/arrow-left-light.png) no-repeat left;
}
.flickerplate .arrow-navigation.right {
	right:0%
}
.flickerplate .arrow-navigation.right .arrow {
	opacity:0;
	margin:0px 0px 0px -80%;
	background: url(../images/arrow-right-light.png) no-repeat right;
}
.flickerplate .arrow-navigation.left.hover .arrow {
	opacity:1;
	margin:0px 0px 0px 50%
}
.flickerplate .arrow-navigation.right.hover .arrow {
	opacity:1;
	margin:0px 0px 0px -50%
}
.flickerplate .dot-navigation {
	position:absolute;
	bottom:20px;
	width:100%;
	text-align:center;
	z-index:100
}
.flickerplate .dot-navigation ul {
	list-style:none;
	padding:0px 15px;
	width:72px;
	margin:0 auto;
}
.flickerplate .dot-navigation ul li {
	float:none;
	width:24px;
	float:left;
}
.flickerplate .dot-navigation .dot {
	width:14px;
	height:14px;
	margin:0px 6px;
	background:url(../images/dot2.png) no-repeat center;
}
.flickerplate .dot-navigation .dot:hover {
	cursor:pointer;
	background:url(../images/dot2.png) no-repeat center;
}
.flickerplate .dot-navigation .dot.active {
	background:url(../images/dot1.png) no-repeat center;
}
.flickerplate .dot-navigation.left, .flickerplate .dot-navigation.left ul {
	text-align:left
}
.flickerplate .dot-navigation.right, .flickerplate .dot-navigation.right ul {
	text-align:right
}
.flickerplate.flicker-theme-dark .arrow-navigation.left .arrow {
	background: url(../images/arrow-left-dark.png) no-repeat left;
}
.flickerplate.flicker-theme-dark .arrow-navigation.right .arrow {
	background: url(../images/arrow-right-dark.png) no-repeat right;
}
.flickerplate.flicker-theme-dark .dot-navigation .dot {
	background-color:rgba(0, 0, 0, 0.12)
}
.flickerplate.flicker-theme-dark .dot-navigation .dot:hover {
	background-color:rgba(0, 0, 0, 0.6)
}
.flickerplate.flicker-theme-dark .dot-navigation .dot.active {
	background-color:#000
}
.flickerplate.flicker-theme-dark ul.flicks li .flick-inner {
	color:rgba(0, 0, 0, 0.9)
}
.flickerplate.animate-transform-slide ul.flicks {
	-webkit-perspective:1000;
	-webkit-backface-visibility:hidden;
	transform:translate3d(0%, 0px, 0px);
	-webkit-transform:translate3d(0%, 0px, 0px);
	-webkit-transition:-webkit-transform 0.6s;
	-o-transition:-o-transform 0.6s;
	-moz-transition:-moz-transform 0.6s;
	transition:transform 0.6s
}
.flickerplate.animate-transition-slide ul.flicks {
	position:relative;
	left:0%;
	-webkit-transition:left 0.4s ease-out;
	-moz-transition:left 0.4s ease-out;
	-o-transition:left 0.4s ease-out;
	-ms-transition:left 0.4s ease-out;
	transition:left 0.4s ease-out
}


.nbanner { position: relative; width: 100%;  overflow: hidden; z-index:0;  }
.nbanner .bd { position: relative;left: 50%; width:1920px; margin: 0 0 0 -960px; text-align: center; overflow: hidden; }
.nbanner .wrap { position:relative; }
.nbanner .hd { position: absolute; bottom: 20px; width:1200px; text-align:center; z-index:999; }
.nbanner .hd ul {  display:inline-block; *display:inline; zoom:1;   }
.nbanner .hd li { float:left; width:12px; height:12px; margin:0 5px; border-radius:100%; text-indent:-9999em; background:#fff; cursor:pointer; }
.nbanner .hd li.on { background:#41517a; }




